<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        #app form {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }

        #app form label,
        #app form div {
            margin-top: 50px;
            font-size: 40px;
        }

        #app form label input,
        #app form div input,
        #app form label select {
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div id="app">
        <form @submit.prevent="submit">
            <label>编号:<input type="text" v-model="rfcode"></label>
            <label>名字:<input type="text" v-model="rfname"></label>
            <label v-if="showNewCategory">新分类名:<input type="text" v-model="category"></label>
            <label v-else>分类:
                <select v-model="category">
                    <option v-for="item in categoryList" :key='item.FNO' :value="item.FNO">{{item.FNO}}</option>
                </select>
                <input type="button" value="新的分类" @click="newCategory">
            </label>
            <div>
                <input type="submit" value="确定">&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" value="取消" @click="cancel">
            </div>
        </form>
    </div>
</body>
<script>
    const {
        ipcRenderer,
        remote
    } = require('electron')
    const {
        dialog,
        BrowserWindow
    } = remote
    let oldItem = null
    const db = require('./db.js')
    const Vue = require('vue/dist/vue.common.js')
    const app = new Vue({
        data() {
            return {
                rfcode: '',
                rfname: '',
                category: '',
                categoryList: [],
                showNewCategory: false
            }
        },
        methods: {
            async submit() {
                if (!this.rfcode.trim()) {
                    dialog.showMessageBox(remote.getCurrentWindow(), {
                        type: 'warning',
                        message: '请输入编号',
                        buttons: ['确定']
                    })
                    return
                }
                if (!this.rfname.trim()) {
                    dialog.showMessageBox(remote.getCurrentWindow(), {
                        type: 'warning',
                        message: '请输入名字',
                        buttons: ['确定']
                    })
                    return
                }
                if (!this.category.trim()) {
                    dialog.showMessageBox(remote.getCurrentWindow(), {
                        type: 'warning',
                        message: '选择一个分类',
                        buttons: ['确定']
                    })
                    return
                }
                if (oldItem) {
                    if (oldItem.RFcode !== this.rfcode) {
                        if (await this.existsRfcode(this.rfcode)) {
                            dialog.showMessageBox(remote.getCurrentWindow(), {
                                type: 'warning',
                                message: '编号已存在',
                                buttons: ['确定']
                            })
                            return
                        }
                    }
                    if (oldItem.RFcode !== this.rfcode || oldItem.sskb !== this.rfname || oldItem.FNO !==
                        this.category) {
                        await db.updateOne(oldItem.RFcode, this.rfcode, this.rfname, this.category)
                        // ipcRenderer.send('closeEdit', true)
                        BrowserWindow.getFocusedWindow().destroy()
                    } else {
                        // ipcRenderer.send('closeEdit', false)
                        BrowserWindow.getFocusedWindow().destroy()
                    }
                } else {
                    if (await this.existsRfcode(this.rfcode)) {
                        dialog.showMessageBox(remote.getCurrentWindow(), {
                            type: 'warning',
                            message: '编号已存在',
                            buttons: ['确定']
                        })
                        return
                    }
                    await db.insertOne(this.rfcode, this.rfname, this.category)
                    // ipcRenderer.send('closeEdit', true)
                    BrowserWindow.getFocusedWindow().destroy()
                }
            },
            async existsRfcode(rfcode) {
                const findItem = await db.checkRfcode(rfcode)
                return findItem.length ? true : false
            },
            cancel() {
                console.log(BrowserWindow.getFocusedWindow())
                BrowserWindow.getFocusedWindow().destroy()
                // ipcRenderer.send('closeEdit', false)
            },
            newCategory() {
                this.category = ''
                this.showNewCategory = true
            }
        },
        async created() {
            this.categoryList = await db.findCategories()
            // if (!oldItem && this.categoryList.length) this.category = this.categoryList[0].FNO
        }
    }).$mount('#app')
    ipcRenderer.on('item', async (event, item) => {
        oldItem = item
        app.rfcode = item.RFcode
        app.rfname = item.sskb
        app.category = item.FNO
        document.title = `修改${item.RFcode}信息`
        // app.itemList = await db.find10(rfcode)
    })
    ipcRenderer.on('add', (event, FNO) => {
        app.category = FNO
        document.title = `添加一个编号`
    })
</script>

</html>